<template>
    <div class="box">
        <div class="captcha_box">
            <h3>密码登录</h3>
            <!-- 输入框 -->
            <div class="input_box">
                <!-- 账号 -->
                <div class="tel">
                    <button @click="changeTel">账号&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{code}}</span>
                        <van-icon name="arrow-down" />
                    </button>
                    <input type="tel" placeholder="请输入手机号码" v-model="phoneNumber" @blur.stop="getNum">
                </div>
                <!-- 密码 -->
                <div class="pwd_box">
                    <span>密码</span>
                    <input :type="showState" placeholder="请输入6~20位的密码" v-model="pwd">
                    <van-icon name="closed-eye" @click.stop="pwdState" v-if="iconShow" class="icon" />
                    <van-icon name="browsing-history-o" v-else @click.stop="pwdState" class="icon" />
                </div>
            </div>
            <!-- 同意用户协议 -->
            <div class="gree_box">
                <input type="radio" name="gree" @click="changeGree">
                <span class="gree_text">
                    <span class="text1">我已阅读并同意签署</span>
                    <router-link to="/userAgreement">
                        <span class="text">《用户协议》</span>
                    </router-link>
                    <router-link to="/PrivacyPolicy">
                        <span class="text">《隐私政策》</span>
                    </router-link>
                </span>
            </div>
            <!-- 获取短信验证 -->
            <van-button round class="btn" :disabled="checkedState" @click="login">登录</van-button>
            <router-link to="/captchaLogin">
                <span class="pwdLogin">验证码登录</span>
            </router-link>
        </div>
        <div class="setShop">
            <router-link to="/CreateAccountNum">
                <span>我要开店</span> |
            </router-link>
            <span @click="ForgetPwd">忘记密码</span>
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { Notify, Toast } from 'vant';
import { userAndPwd } from "../../https/loginApi";
export default {
    data() {
        return {
            phoneNumber: "", // 输入的电话号码
            code: "",  // 区号
            pwd: "", // 密码
            checkedState: true,
            iconShow: true,
            showState: "password",
        }
    },
    created() {
        // 拿到区号
        this.code = this.$store.state.login.areaCode
    },
    methods: {
        // 选择区号
        changeTel() {
            this.$router.push('/SelectTel')
        },
        // 同意协议
        changeGree() {
            this.checkedState = !event.target.checked
        },
        // 点击按钮登录
        login() {
            let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/
            let pattern = /0?(13|14|15|18|17)[0-9]{9}/
            if (pattern.test(this.phoneNumber)) {
                this.getNum()
                if (reg.test(this.pwd)) {
                    this.checkedState = true
                    // 账户
                    let user = this.code + this.phoneNumber
                    userAndPwd(user, this.pwd)
                        .then((res) => {
                            if (res.code === 500) {
                                console.log('登陆成功：', res)
                                Toast.success('登录成功!');
                                this.$router.push('/tar')
                                return
                            }
                            Toast.fail('账号或密码错误!');
                        })
                        .catch((err) => {
                            console.log(err)
                            Toast.fail('账号或密码错误!');
                        })
                    // this.$router.push('/tar')

                } else {
                    Notify({ type: 'danger', message: '密码包含6到20位之间的数字和字母' });
                }
                return
            }
            Notify({ type: 'danger', message: '手机号不符合规则' });
            this.checkedState = false
        },
        // 点击小眼睛查看密码
        pwdState() {
            this.iconShow = !this.iconShow
            if (this.showState == 'text') {
                this.showState = 'password'
            } else {
                this.showState = 'text'
            }
        },
        // 忘记密码
        ForgetPwd() {
            let pattern = /0?(13|14|15|18|17)[0-9]{9}/
            if (pattern.test(this.phoneNumber)) {
                let number = this.code + this.phoneNumber
                // console.log(number);
                this.$router.push("/ResetPassword/" + number)
                return
            }
            Notify({ type: 'danger', message: '忘记密码请先填入符合规则的手机号码' });
        },
        // 拿到账号以便于修改新密码
        ...mapMutations(['setUserNumber']),
        getNum() {
            if (this.phoneNumber.length == 11) {
                this.setUserNumber(this.phoneNumber)
                return
            }
            Notify({ type: 'danger', message: '忘记密码请先填入符合规则的手机号码' });
        }
    },
}
</script>

<style scoped>
.box {
    display: flex;

    flex-direction: column;
    justify-content: space-between;
    height: 667px;
}

.captcha_box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.captcha_box h3 {
    margin: 40px 0;
    font-weight: 400;
    align-self: flex-start;
}

/* 输入框模块 */
.input_box {
    margin: 0 auto;
    width: 100%;
}

.tel {
    width: 100%;
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #cfccd6;
}

.tel button {
    width: 33%;
    font-size: 15px;
    margin: 0;
    border: none;
    padding: 6px 0;
    background-color: #ffff;
    text-align: left;
    padding-left: 2%;
}

.tel input {
    font-size: 15px;
    width: 60%;
    border: none;
}

.captcha {
    border-bottom: 1px solid #cfccd6;

}

.pwd_box {
    margin: 10px 0;
    padding: 6px 0;
    border-bottom: 1px solid #cfccd6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pwd_box span {
    width: 10%;
    margin-left: 7px;
    font-size: 14px;
}

.pwd_box input {
    border: none;
    width: 60%;
    margin-left: 19%;
    font-size: 15px;
}

input[type="password"]::-ms-reveal {
    display: none
}

.icon {
    color: #ff6e53;
}

input::placeholder {
    color: #cfccd6;
    font-size: 15px;
    text-align: left;
}

/* 校验码 */
.check_code {
    padding: 0 10px;
    background-color: pink;
    color: slateblue;
    font-size: 16px;
}

/* 已阅读 */
.gree_box {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.text1 {
    color: #a8a7a9;
}

.text {
    color: #ff6e53;
}

/* 短信验证按钮 */
.btn {
    width: 90%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
}

.pwdLogin {
    font-size: 15px;
    margin-top: 40px;
    color: #ff6e53;
}

.setShop {
    font-size: 15px;
    text-align: center;
    margin-bottom: 20px;
    color: #a8a7a9;
}

.setShop span {
    color: #a8a7a9;
}
</style>
